<!DOCTYPE html>
<html lang="en">
<head>
<title>Ch02-12 Image Picker</title>
</head>
<body>
<h1>Picture Picker</h1>
<p>
    <img src="seaside1.JPG" id="pageImage"></p>

<p>
<button onclick="doDisplayImage1();">Seaside 1</button>
</p>
<p>
    <button onclick="doDisplayImage2();">Seaside 2</button>
</p>

<p>
    <button onclick="doDisplayImage3();">Fairground</button>
</p>
<p>
    <button onclick="doDisplayImage4();">The Deep Sunrise</button>
</p>


<script>
    function doDisplayImage1() {
      var pic = document.getElementById("pageImage");
      pic.src="seaside1.JPG";
    }

    function doDisplayImage2() {
      var pic = document.getElementById("pageImage");
      pic.src="seaside2.JPG";
    }

    function doDisplayImage3() {
var pic = document.getElementById("pageImage");
pic.src="fairground.JPG";
    }

    function doDisplayImage4() {
      var pic = document.getElementById("pageImage");
      pic.src="deepsunrise.JPG";
    }


</script>


</body>
</html>